<template>
	<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
		<template #header>
			<el-row>
				<el-col :span='10'>
					<div style='line-height: 32px'>代理商编辑</div>
				</el-col>
				<el-col :span='14' style='text-align: right'>
					<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
					<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
				</el-col>
			</el-row>
		</template>
		<div style='margin-top: 8px;margin-bottom: 8px'>
			<el-form ref='formRef' :inline='true' class='yform' :model='form' label-width='140px'>
				<el-tabs type='card' v-model='activeName'>
					<el-tab-pane label='基本信息' name='tab1'>
						<div class='yform-div'>
							<el-form-item label='代理商名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
								<el-input v-model='form.name'></el-input>
							</el-form-item>
							<el-form-item label='代理商分类：' prop='catid' :rules="[{ required: true, message: '分类不能为空'}]" style='width: 25%'>
								<el-select v-model='form.catid' style='width: 100%'>
									<el-option v-for='item in state.cates' :key='item.id' :label='item.name' :value='item.id' />
								</el-select>
							</el-form-item>
							<el-form-item label='代理商编号：' style='width: 25%'>
								<span v-show='form.id' style='margin-left: 5px;color: green'>{{ form.senum }}</span>
								<span v-show='!form.id' style='margin-left: 5px;color: #b9abab'>提交后自动生成</span>
							</el-form-item>
							<el-form-item label='代理商地址：' style='width: 100%'>
								<el-input v-model='form.addre' readonly @click='chooseAddr'></el-input>
							</el-form-item>
							<el-form-item label='代理商资质：'>
								<el-select v-model='form.grade' placeholder='请选择' style='width: 100%'>
									<el-option v-for='item in state.grades' :key='item.id' :value='item.id' :label='item.name' />
								</el-select>
							</el-form-item>
						</div>
					</el-tab-pane>

					<el-tab-pane label='权限信息' name='tab9'>
						<div class='yform-div'>
							<el-form-item label='备注：' style='width: 100%'>
								<el-input type='textarea' :rows='4' v-model='form.notes' />
							</el-form-item>
							<el-form-item label='可查看者：' style='width: 50%'>
								<el-input type='textarea' :rows='4' v-model='viewersName' readonly @click='openViewersModal'>
								</el-input>
							</el-form-item>
							<el-form-item label='可编辑者：' style='width: 50%'>
								<el-input type='textarea' :rows='4' v-model='editorsName' readonly @click='openEditorsModal'>
								</el-input>
							</el-form-item>
							<el-form-item label='创建人：' style='width: 25%'>
								<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
							</el-form-item>
							<el-form-item label='创建时间：' style='width: 25%'>
								<div class='zinput'> {{ form.crtim }}</div>
							</el-form-item>
							<el-form-item label='更新人：' style='width: 25%'>
								<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
							</el-form-item>
							<el-form-item label='更新时间：' style='width: 25%'>
								<div class='zinput'> {{ form.uptim }}</div>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		<div id='simpleSquare'></div>
		<OrgModal ref='orgModal' @close='closeOrgModal' />
		<Amap ref='amapRef' @close='closeAmap' />
	</el-card>
</template>
<script lang='ts'>
export default { name: 'SaAgentMainEdit' };
</script>
<script lang='ts' setup>
import { computed, getCurrentInstance, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import { editInit, tabSave, tabClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import Amap from '/@/comps/ass/amap.vue';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
import { SVG } from '@svgdotjs/svg.js';

const route = useRoute();
const formRef = ref<FormInstance>();
const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');

const state = reactive({
	url: '/sa/agent/main',
	params: { path: '', query: '' }, grades: [] as any, cates: [] as any,
	form: { avtag: true, items: [] as any } as any,
});

const { form } = toRefs(state);


onMounted(async () => {
	await editInit({ state, route });
	await catesInit();
	await gradesInit();
	let shapeModel = SVG().addTo('#simpleSquare').size('100%', '100%');
	shapeModel.rect(100, 100).attr({ fill: '#00B1B6' });
	//http://t.zoukankan.com/onesea-p-15292991.html
});


//region 经办人与可查看者选择逻辑
const orgModal = ref();

const openViewersModal = () => {
	orgModal.value.openModal({
		opener: 'viewers',
		orgType: 11,
		selectMode: 2,
		orgs: toRaw(form.value.viewers),
	});
};

const openEditorsModal = () => {
	orgModal.value.openModal({
		opener: 'editors',
		orgType: 11,
		selectMode: 2,
		orgs: toRaw(form.value.editors),
	});
};

const closeOrgModal = (data: any) => {
	if (data.opener == 'viewers') {
		if (data.orgs && data.orgs.length > 0) {
			form.value.viewers = data.orgs;
		} else {
			form.value.viewers = null;
		}
	} else if (data.opener == 'editors') {
		if (data.orgs && data.orgs.length > 0) {
			form.value.editors = data.orgs;
		} else {
			form.value.editors = null;
		}
	}
};

const viewersName = computed(() => {
	let names = '';
	if (form.value.viewers && form.value.viewers.length > 0) {
		for (const user of form.value.viewers) {
			names += user.name + '；';
		}
	}
	return names;
});

const editorsName = computed(() => {
	let names = '';
	if (form.value.editors && form.value.editors.length > 0) {
		for (const user of form.value.editors) {
			names += user.name + '；';
		}
	}
	return names;
});
//endregion

//region 地址选择逻辑
const amapRef = ref();
const chooseAddr = () => {
	amapRef.value.openModal({ adcoo: form.value.adcoo, adreg: form.value.adreg, addet: form.value.addet, adzoo: '' });
};

const closeAmap = (data: any) => {
	if (data) {
		form.value.addre = data.adreg + data.addet;
		form.value.adcoo = data.adcoo;
		form.value.adreg = data.adreg;
		form.value.addet = data.addet;
		form.value.adpro = data.adpro;
		form.value.adcit = data.adcit;
		form.value.addis = data.addis;
	}
};
//endregion

//region 业务字典逻辑
const gradesInit = async () => {
	state.grades = await request({
		url: '/ass/dict/data/list?maiid=AG_LEVEL',
		method: 'get',
	});
};

const catesInit = async () => {
	state.cates = await request({
		url: '/sa/agent/cate/list',
		method: 'get',
	});
};
//endregion

</script>

<style scoped>

</style>
